<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_rightClick"></title>
    <style type="text/css">
        #myMenu {
            position: absolute;
            background-color: silver;
            visibility: hidden;
        }

        ul {
            list-style-type: none;
            width: 112px;
        }

        #myMenu ul {
            float: left;
            border: 1px solid #979797;
            background: #f1f1f1 url(./images/line.png) 36px 0 repeat-y;
            padding: 2px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
        }

        #myMenu ul li {
            width: 112px;
            float: left;
            clear: both;
            height: 35px;
            cursor: pointer;
            line-height: 32px;
        }

        #myMenu ul li:hover {
            background-color: #CAE1FF;
        }
        .editPane {
            position: absolute;
            right: 60px;
            top: 50px;
            text-align: center;
            background: #FFF;
            z-index: 1000;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
    <div class='panel-heading'>
        <h5 class='panel-title text-center' data-i18n="resources.text_rightClick"></h5>
    </div>
    <div class='panel-body' id='params'>
        <p></p>
        <div align='center' class='button-group'>
            <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.text_input_value_addData" onclick="addData()"/>
            <label id="lab"></label>
        </div>
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%; position: relative;"></div>
<div id ="myMenu">
    <ul style="margin-top: 0px; margin-bottom: 0px;margin-left: 0px" >
        <li onclick="setCenter()" >
            <div style="float:left;padding-right: 5px;width:30px;height:30px;"><img src="./images/center.png" /></div>
            <div data-i18n="resources.text_mediacy" style="float:left;width:52px;height:30px;  text-align: center; font-size: 15px;"></div>  </li>
        <li  onclick="deleteSelect()">
            <div style="float:left;padding-right: 5px;width:30px;height:30px"><img src="./images/delete.png" /></div>
            <div data-i18n="resources.text_input_value_delete" style="float:left;width:52px;height:30px;  text-align: center; font-size: 15px;"></div>  </li>
        </li>
    </ul>
</div>
    <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
    <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
    <script type="text/javascript">
        var map, layer, markerLayer, gmarker, marker, menu,
            host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090",
            url = host + "/iserver/services/map-world/rest/maps/World";

        function init()
        {
            var broz = SuperMap.Util.getBrowser();
            if (broz.device === 'android'|| broz.device === 'apple') {
                widgets.alert.showAlert(resources.msg_supportEquipment,false);
                return;
            }
            map = new SuperMap.Map("map",{
                eventListeners:{"movestart":function(){
                    menu.style.visibility="hidden";
                },
                    "click":function(){
                        menu.style.visibility="hidden";
                    }}
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("world",url,{transparent: true, cacheEnabled:true}, {maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});
            markerLayer = new SuperMap.Layer.Markers("makerLayer");
        }

         $(document).ready(function () {
             init();
         });

        //创建EventUtil对象
        var EventUtil = {
            addHandler: function (element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                }
                else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                }
            },
            getEvent: function (event) {
                return event ? event : window.event;
            },
            //取消事件的默认行为
            preventDefault: function (event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            },
            stopPropagation: function (event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            }
        };
        EventUtil.addHandler(window, "load", function (event) {
            menu = document.getElementById("myMenu");
            EventUtil.addHandler(myMenu, "contextmenu", function (event) {
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);
                menu.style.visibility = "visible";
            });
            EventUtil.addHandler(document, "click", function (event) {
                menu.style.visibility = "hidden";
            });
        });
        function addLayer() {
            map.addLayers([layer, markerLayer]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(116.47, 38.61), 2);
        }
        function addData() {
            markerLayer.removeMarker(marker);
            var points = new SuperMap.LonLat(116.47, 38.61)
            var size = new SuperMap.Size(44, 33),
                offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                icon = new SuperMap.Icon("./images/marker.png", size, offset);
            marker = new SuperMap.Marker(points, icon);
            marker.events.on({
                "rightclick": menuDiv,
                "scope": marker
            });
            markerLayer.addMarker(marker);
            widgets.alert.showAlert(resources.msg_rightClick,true);
        }
        function menuDiv() {
            var p = map.getPixelFromLonLat(this.lonlat);
            menu.style.left = p.x + "px";
            menu.style.top = p.y + 39 + "px";
            menu.style.visibility = "visible";
            gmarker = this;

        }
        function setCenter() {
            menu.style.visibility = "hidden";
            map.setCenter(gmarker.lonlat, 2);
        }
        function deleteSelect() {
            menu.style.visibility = "hidden";
            markerLayer.removeMarker(gmarker);
            widgets.alert.clearAlert();
        }
    </script>
    </body>
</html>